<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <!-- JS文件 -->
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>

    <title>评分</title>
    <!-- CSS文件 -->
    <link href="/static/css/style.css" rel="stylesheet">
</head>

<body>

    <!--头部-->
    <div class="header">
        <div class="navbar">
            <div class="nav-item "><a href="/index">首页</a></div>
            <div class="nav-item"><a href="/movie">热门电影</a></div>
            <div class="nav-item"><a href="/score">评分</a></div>
            <div class="nav-item"><a href="/word">词云</a></div>
        </div>
    </div>

    <main id="main">

        <section id="about" class="about">
            <div class="section-title">
                <h2>豆瓣新片榜电影评分</h2>
                <p>直观展示电影评分分布</p>
            </div>
        </section>

        <section class="counts">
            <div id="f7cf6090140548e88c37cf83203219a8" class="chart-container" style="width:900px; height:450px; "></div>
        </section>
    </main>

    <!-- 尾部 -->
    <div class="footer">
        <p2>&#xa9; 2025翟荟茹python期末作业</p2>
    </div>

    <script>
        var chart_f7cf6090140548e88c37cf83203219a8 = echarts.init(
            document.getElementById('f7cf6090140548e88c37cf83203219a8'), 'white', { renderer: 'canvas' });
        var option_f7cf6090140548e88c37cf83203219a8 = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "aria": {
                "enabled": false
            },
            "series": [
                {
                    "type": "bar",
                    "name": "评分",
                    "legendHoverLink": true,
                    "data": {{ number|tojson }},
                    "realtimeSort": false,
                    "showBackground": false,
                    "stackStrategy": "samesign",
                    "cursor": "pointer",
                    "barMinHeight": 0,
                    "barCategoryGap": "20%",
                    "barGap": "30%",
                    "large": false,
                    "largeThreshold": 400,
                    "seriesLayoutBy": "column",
                    "datasetIndex": 0,
                    "clip": true,
                    "zlevel": 0,
                    "z": 2,
                    "label": {
                        "show": true,
                        "margin": 8,
                        "valueAnimation": false
                    }
                }
            ],
            "legend": [
                {
                    "data": [
                        "评分"
                    ],
                    "selected": {},
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14,
                    "backgroundColor": "transparent",
                    "borderColor": "#ccc",
                    "borderRadius": 0,
                    "pageButtonItemGap": 5,
                    "pageButtonPosition": "end",
                    "pageFormatter": "{current}/{total}",
                    "pageIconColor": "#2f4554",
                    "pageIconInactiveColor": "#aaa",
                    "pageIconSize": 15,
                    "animationDurationUpdate": 800,
                    "selector": false,
                    "selectorPosition": "auto",
                    "selectorItemGap": 7,
                    "selectorButtonGap": 10
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "axisLabel": {
                        "rotate": 45
                    },
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": true,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "animation": true,
                    "animationThreshold": 2000,
                    "animationDuration": 1000,
                    "animationEasing": "cubicOut",
                    "animationDelay": 0,
                    "animationDurationUpdate": 300,
                    "animationEasingUpdate": "cubicOut",
                    "animationDelayUpdate": 0,
                    "data":
                        {{ score|tojson }}
                }
            ],
            "yAxis": [
                {
                    "name": "评分",
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": true,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "animation": true,
                    "animationThreshold": 2000,
                    "animationDuration": 1000,
                    "animationEasing": "cubicOut",
                    "animationDelay": 0,
                    "animationDurationUpdate": 300,
                    "animationEasingUpdate": "cubicOut",
                    "animationDelayUpdate": 0
                }
            ],
        };
        chart_f7cf6090140548e88c37cf83203219a8.setOption(option_f7cf6090140548e88c37cf83203219a8);
    </script>
</body>

</html>